<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>用户管理</title>
	<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
	<link href="./bootstrap/css/datetimepicker.css" rel="stylesheet">
	<link rel="stylesheet" href="./css/source-basis.css" />
	<link rel="stylesheet" href="./css/global.css" />
	<link rel="stylesheet" href="./css/tree.css" />
	<script src="./js/jquery-1.11.3.min.js"></script>
	<script src="./bootstrap/js/bootstrap.min.js"></script>
	<script src="./bootstrap/js/moment.js"></script>
	<script src="./bootstrap/js/datetimepicker.js"></script>
	<script src="./js/global.js"></script>
	<script src="./js/treescroll.min.js"></script>
	<script src="./js/accordion.js"></script>
</head>

<body>
	<div class="container col-lg-12">
		<div class="navigation">
			<img class="nav-logo float-left" src="./img/logo.png" alt="logo">
			<div class="nav-text float-left">标准版</div>
			<div class="nav-drop dropdown float-right">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">ADMIN <span class="caret"></span></a>
				<ul class="dropdown-menu dropdown-menu-right">
					<span class="dropdown-menu-top"></span>
					<li><a href="#">个人信息</a></li>
					<li><a href="#">修改密码</a></li>
				</ul>
			</div>
			<img class="nav-avatar float-right" src="./img/avatar.png" alt="头像">
		</div>
		<div id="sidebar" class="sidebar float-left">
			<ul id="accordion" class="accordion">
				<li class="a1 active">
					<div class="link"><i class="icon-source"></i>源和目标<i class="stretch" style="margin-left: 34px;"></i></div>
					<ul class="submenu">
						<li><a href="source.html" style="background: none;padding-left: 44px;">源配置</a></li>
						<li><a href="target.html" style="background: none;padding-left: 44px;">目标配置</a></li>
					</ul>
				</li>
				<li class="a2"><a href="drive.html">光驱管理</a></li>
				<li class="a3">
					<div class="link"><i class="icon-ferry"></i>摆渡机管理<i class="stretch"></i></div>
					<ul class="submenu">
						<li><a href="ferry-list.html" style="background: none;padding-left: 44px;">摆渡机列表</a></li>
						<li><a href="machine.html" style="background: none;padding-left: 44px;">本机列表</a></li>
					</ul>
				</li>
				<li class="a4"><a href="system.html">系统设置</a></li>
				<li class="a5"><a href="user-management.html"> 用户管理</a></li>
				<li class="a6"><a href="menu.html"> 菜单管理</a></li>
				<li class="a7"><a href="role-management.html"> 角色管理</a></li>
				<li class="a8">
					<div class="link"><i class="icon"></i>管理员管理<i class="stretch"></i></div>
					<ul class="submenu">
						<li><a href="admin-list.html" style="background: none;padding-left: 44px;">管理员列表</a></li>
						<li><a href="role-list.html" style="background: none;padding-left: 44px;">管理员角色列表</a></li>
					</ul>
				</li>
				<li class="a9"><a href="user.html"> 个人中心</a></li>
			</ul>
			<ul class="m-hide icon-sidebar">
				<li class="active"><a href="source.html" data-toggle="tooltipp" data-placement="right" title="源和目标">
					</a></li>
				<li><a href="drive.html" data-toggle="tooltipp" data-placement="right" title="光驱管理">
					</a></li>
				<li><a href="ferry-list.html" data-toggle="tooltipp" data-placement="right" title="摆渡机管理">
					</a></li>
				<li><a href="system.html" data-toggle="tooltipp" data-placement="right" title="系统配置">
					</a></li>
				<li><a href="user-management.html" data-toggle="tooltipp" data-placement="right" title="用户管理">
					</a></li>
				<li><a href="menu.html" data-toggle="tooltipp" data-placement="right" title="菜单管理">
					</a></li>
				<li><a href="role-management.html" data-toggle="tooltipp" data-placement="right" title="角色管理">
					</a></li>
				<li><a href="admin-list.html" data-toggle="tooltipp" data-placement="right" title="管理员管理"> </a></li>
				<li><a href="user.html" data-toggle="tooltipp" data-placement="right" title="个人中心"></a></li>
			</ul>
			<i id="flod-btn"></i>
		</div>
		<div id="m-content" class="content float-right clearfloat">
			<ol class="breadcrumb" style="background: none">
				<li><a>源和目标</a></li>
				<li class="active">目标配置</li>
			</ol>
			<div class="card-2 float-right  panel">
				<div>
					<ul class="ul_ul">
						<li class="left_li">配置名称：</li>
						<li class="right_li margin-l "><input class="input-padding" type="text" placeholder="请输入"></li>

					</ul>
					<ul class="ul_ul">
						<li class="left_li">IP地址：</li>
						<input class="input-ip" type="text">
						<input class="input-ip" type="text">
						<input class="input-ip" type="text">
						<input class="input-ip" type="text">
					</ul>
					<ul class="ul_ul">
						<li class="left_li">用户名：</li>
						<li class="right_li margin-l "><input class="input-padding" type="text" placeholder="asf5636"></li>
					</ul>
					<ul class="ul_ul">
						<li class="left_li">密码：</li>
						<li class="right_li margin-l"><input class="input-padding" type="password"></li>
					</ul>
					<ul class="ul_ul">
						<li class="left_li">协议：</li>
						<li class="right_li margin-l">
							<div class="form-group right_li" style="width: 563px;">
								<select class="form-control">
									<option>FTP</option>
									<option>SFTP</option>
									<option>SMB</option>
								</select>
							</div>
						</li>
					</ul>
					<ul class="ul_ul">
						<li class="left_li">端口：</li>
						<li class="right_li margin-l"><input class="input-padding" type="text" placeholder="5553053">
						</li>
					</ul>
					<ul class="ul_ul">
						<li class="left_li">类型：</li>
						<li class="right_li margin-l" style="display: flex;">
							<div style="display: flex;align-items: center;margin-right: 20px;">
								<input type="checkbox" style="width: 20px;margin:0 5px 0 0;">源
							</div>
							<div style="display: flex;align-items: center; margin-right: 20px;">
								<input type="checkbox" style="width: 20px;margin:0 5px 0 0;">目标
							</div>
							<button
								style="width: 88px;height: 32px;background: linear-gradient(180deg, #75CEFF 0%, #1976C4 100%);border-radius: 3px;border: 1px solid #FFFFFF;color: #fff;">测试链接</button>
						</li>
					</ul>
					<ul class="ul_bei">
						<li class="left_li">备注：</li>
						<li class="right_bei margin-l"><textarea class="input-padding" type="text" placeholder="请输入"></textarea>
						</li>
					</ul>
				</div>
				<div class="title">
					<ul>
						<li class="btn btn-xs float-left m-btn">保存</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 删除提示 -->
		<div class="modal fade" tabindex="-1" id="myModalDelete" role="dialog">
			<div class="modal-dialog modal-center" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title">提示</h4>
					</div>
					<div class="modal-body">
						<div class="tip-content">
							<img src="img/tip.png" alt="" />
							<span>确定要删除该源配置吗？</span>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn_b">确定</button>
						<button type="button" class="btn_q" data-dismiss="modal">
							取消
						</button>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">新增配置</h4>
					</div>
					<div class="modal-body">
						<form class="modal-form">
							<ul class="ul_ul">
								<li class="left_li">配置名称：</li>
								<li class="right_li margin-l "><input class="input-padding" type="text" placeholder="请输入配置名称"></li>
							</ul>
							<ul class="ul_ul">
								<li class="left_li">IP地址：</li>
								<li class="right_li margin-l ">
									<input class="input-padding" style="width: 96.7px;text-align: center;padding-left: 0;" type="text">
									<input class="input-padding" style="width: 96.7px;text-align: center;padding-left: 0;" type="text">
									<input class="input-padding" style="width: 96.7px;text-align: center;padding-left: 0;" type="text">
									<input class="input-padding" style="width: 96.7px;text-align: center;padding-left: 0;" type="text">
								</li>
							</ul>
							<ul class="ul_ul">
								<li class="left_li">用户名：</li>
								<li class="right_li margin-l "><input class="input-padding" type="text" placeholder="asf5636"></li>
							</ul>
							<ul class="ul_ul">
								<li class="left_li">密码：</li>
								<li class="right_li margin-l"><input class="input-padding" type="password"></li>
							</ul>
							<ul class="ul_ul">
								<li class="left_li">协议：</li>
								<li class="right_li margin-l">
									<div class="form-group right_li" style="width: 401px;">
										<select class="form-control">
											<option>FTP</option>
											<option>SFTP</option>
											<option>SMB</option>
										</select>
									</div>
								</li>
							</ul>
							<ul class="ul_ul">
								<li class="left_li">端口：</li>
								<li class="right_li margin-l"><input class="input-padding" type="text" placeholder="5553053">
								</li>
							</ul>
							<ul class="ul_ul">
								<li class="left_li">远程目录：</li>
								<li class="right_li margin-l "><input class="input-padding" type="text" placeholder="请输入"></li>
							</ul>
							<ul class="ul_ul">
								<li class="left_li">类型：</li>
								<li class="right_li margin-l" style="display: flex;">
									<div style="display: flex;align-items: center;margin-right: 20px;">
										<input type="checkbox" style="width: 20px;margin:0 5px 0 0;">源
									</div>
									<div style="display: flex;align-items: center; margin-right: 20px;">
										<input type="checkbox" style="width: 20px;margin:0 5px 0 0;">目标
									</div>
									<button
										style="width: 88px;height: 32px;background: linear-gradient(180deg, #75CEFF 0%, #1976C4 100%);border-radius: 3px;border: 1px solid #FFFFFF;color: #fff;">测试链接</button>
								</li>
							</ul>
							<ul class="ul_bei">
								<li class="left_li">备注：</li>
								<li class="right_bei margin-l"><textarea class="input-padding" type="text" placeholder="请输入"></textarea>
								</li>
							</ul>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn_b">保存</button>
						<button type="button" class="btn_q" data-dismiss="modal">取消</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		$(function () {
			// 列表点击选中的效果
			$('#m-tab-top>tbody>tr,#m-tab-bottom>tbody>tr').click(function () {
				var i = $(this).index();
				$($('#m-tab-top>tbody>tr')[i]).toggleClass('tr-active').siblings().removeClass('tr-active');
				$($('#m-tab-bottom>tbody>tr')[i]).toggleClass('tr-active').siblings().removeClass('tr-active');
			});
			$('#datetimepicker1,#datetimepicker2').datetimepicker({
				format: 'YYYY-MM-DD',
				locale: moment.locale('zh-cn'),
				defaultDate: "",
			});
			$('.a3 #adminBtn').click(function () {
				$('#adminBtn').removeClass().addClass('glyphicon glyphicon-menu-up')
				$('#admin').show()
			})
		})
	</script>
</body>

</html>